import { useMemo } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { YmAddPageLayout, type YmAddPageLayoutProps } from 'ym-design';
import CarIndexInfo from './Info';
import CarIndexPanel from './Panel';
const { PaneItem } = YmAddPageLayout;
export default function () {
  const [searchParam] = useSearchParams();
  const plateNumber = searchParam.get('plateNumber') || '';
  const safetyIndexCarId = searchParam.get('safetyIndexCarId') || '';
  const entId = searchParam.get('entId') || '';
  const carId = searchParam.get('carId') || '';
  const componentProps = {
    entId: entId,
    carId: carId,
    safetyIndexCarId: safetyIndexCarId,
  };
  const navigator = useNavigate();
  const layoutParams: YmAddPageLayoutProps = useMemo(
    () => ({
      leftOperation: {
        onBack: () => {
          navigator('/safeIndex/safeIndexStatistics/carIndex');
        },
      },
      destroyInactiveTabPane: false,
    }),
    [],
  );
  return (
    <div className="maxPanel">
      <YmAddPageLayout {...layoutParams}>
        <PaneItem
          tabKey="tab2"
          label={`${plateNumber}安全指数分析`}
          className="pane_tab2"
          style={{ maxWidth: '100% !important' }}
        >
          <CarIndexPanel {...componentProps}></CarIndexPanel>
        </PaneItem>
        <PaneItem tabKey="tab1" label={`${plateNumber}安全指数详情`} className="pane_tab1">
          <CarIndexInfo {...componentProps}></CarIndexInfo>
        </PaneItem>
      </YmAddPageLayout>
    </div>
  );
}
